.manage-project {
	width: 100%;
	height: 100%;
	background-color: var(--blue-50);

	:deep(.el-header) {
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	:deep(.el-main) {
		width: 100%;
		max-height: calc(100% - 50px);
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		.pro-card {
			width: calc(25% - 6px);
			height: 128px;
			padding: 8px 12px;
			background-color: #fff;
			border-radius: 8px;
			border: 1px solid var(--grey-300);
			cursor: pointer;
			transition: all 0.3s;
			position: relative;

			.el-space {
				position: absolute;
				right: 10px;
				top: 10px;
				display: none;

				.el-space__item {
					padding: 4px;
					border-radius: 4px;

					&:hover {
						background-color: var(--grey-200);
					}
				}
			}

			&:hover {
				box-shadow: 2px 5px 10px 0 rgba(27, 33, 41, .1);

				.el-space {
					display: flex;
				}
			}
		}

		.el-empty {
			width: 100%;
		}
	}
}